<template>
  <div class="mg16 flex">
    <left :setpData="setpData" :content="contentLeft"></left>
    <div class="apply_right">
      <div class="pd5_20">
        <el-tabs v-model="activeName">
          <el-tab-pane label="会议直播管理" name="first"></el-tab-pane>
          <el-tab-pane label="会议报名用户" name="second"></el-tab-pane>
        </el-tabs>
      </div>

      <div v-if="activeName == 'first'" class="mg16_mange">
        <!-- 管理开头 -->
        <div class="mange_top">
          <div class="mange_left">
            <h5>{{ MeetingContent.title }}</h5>
            <div class="content">
              <span>{{ MeetingContent.StartTime }}</span>
              <span class="pd25_30"></span>

              <el-popover placement="top" width="200" trigger="hover">
                <div>
                  <vue-qr :text="`https://www.instrument.com.cn/webinar/meeting_${this.$route.query.mid}.html`"
                    :size="200" />
                  <div style="text-align: center">微信扫码分享会议</div>
                </div>
                <span slot="reference" style="color: #0c7ff2; cursor: pointer"><i class="el-icon-share"></i>分享会议</span>
              </el-popover>
            </div>
          </div>
          <el-button v-if="$route.query.index" type="primary" @click="goHref()">进行直播测试</el-button>
          <el-button v-else type="danger" @click="goHref()">开始直播</el-button>
        </div>
        <!-- 管理主体 -->
        <div>
          <div class="mang_body_title">
            <span class="title">
              直播链接
              <span class="label">温馨提示：复制对应角色的链接打开网页，填写频道号和密码，开启直播</span>
            </span>
            <span class="right" @click="$refs.kfdialog.customerDialogs = true">
              <i class="el-icon-headset" style="color: #a8b5c5; font-size: 16px"></i>
              直播客服
            </span>
          </div>
          <div class="mange_body_content">
            <div class="list" v-for="item in PolyvData.polyv" :key="item.account">
              <div class="item_top">
                <span class="top_title">主持人</span>
                <span class="pd50_150">频道号：{{ item.channelId }}</span>
                <span>密码：{{ item.channelPasswd }}</span>
              </div>
              <div style="color: #202933">
                <span>主持人链接：{{
                  "https://livem.instrument.com.cn/web-start/classroom?channelId=" +
                  item.channelId
                }}</span>
                <el-button type="text" class="ml5" @click="copyHref(item.channelId, 1)">复制</el-button>
              </div>
            </div>
            <div class="list" v-for="item in PolyvData.list" :key="item.account">
              <div class="item_top">
                <span class="top_title">{{ item.actor }}：{{ item.nickname }}</span>
                <span class="pd50_150">频道号：{{ item.account }}</span>
                <span>密码：{{ item.passwd }}</span>
              </div>
              <div style="color: #202933">
                <span v-if="item.actor == '嘉宾'">主持人链接：{{
                  "https://livem.instrument.com.cn/web-start/guest?channelId=" +
                  item.account
                }}</span>
                <span v-if="item.actor == '助教'">主持人链接：https://livem.instrument.com.cn/teacher.html</span>
                <el-button type="text" class="ml5" @click="copyHref(item, 2)">复制</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeName == 'second'" class="mg16_mange">
        <div class="flex flex-warp flex_bt">
          <div class="flex flex-warp" style="align-items: center">
            <div class="mb16">
              <span class="pr10">手机号</span>
              <el-input v-model="searchObj.mobile" placeholder="请输入手机号" class="width200 mr10" clearable></el-input>
              <!-- <el-select v-model="searchObj.mobile" placeholder="请选择" class="width200 mr10">
                <el-option v-for="item in industryTypeList" :key="item.name" :label="item.name" :value="item.name" />
              </el-select> -->
            </div>
            <div class="mb16">
              <span class="pr10">所属行业</span>
              <el-select v-model="searchObj.industry" placeholder="请选择" class="width200 mr10">
                <el-option v-for="item in industryTypeList" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
            </div>
            <div class="mb16" v-if="$route.query.isCharges==1">
              <span class="pr10">是否有凭证</span>
              <el-select v-model="searchObj.ispayproof" placeholder="请选择" class="width200 mr10" clearable>
                <el-option v-for="item in ispayproofList" :key="item.name" :label="item.name" :value="item.value" />
              </el-select>
            </div>
            <div class="mb16 mr16">
              <span class="pr10">单位类型</span>
              <el-select v-model="searchObj.unitType" placeholder="请选择" class="width200" clearable @change="changeunit">
                <el-option v-for="item in companyTypeList" :key="item.name" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="mb16 mr16">
              <span class="pr10">职位</span>
              <el-select v-model="searchObj.dutyType" placeholder="请选择" class="width200" clearable>
                <el-option v-for="item in postTypeList" :key="item.name" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="mb16 mr16">
              <span class="pr10">审核状态</span>
              <el-select v-model="searchObj.ispass" placeholder="请选择" class="width200" clearable>
                <el-option v-for="item in ispassData" :key="item.name" :label="item.name" :value="item.value" />
              </el-select>
            </div>
            <div class="mb20">
              <el-button @click="React">重置</el-button>
              <el-button type="primary" @click="SearchListBt">筛选</el-button>
            </div>
          </div>
          <div></div>
        </div>

        <div class="apply_center">
          <span>总计：{{ rootBody.total }}人&nbsp;&nbsp;&nbsp;
            待审核：{{rootBody.passing}}&nbsp;&nbsp;&nbsp;
            已审核：{{rootBody.pass}}&nbsp;&nbsp;&nbsp;
            已驳回：{{ rootBody.reject }}&nbsp;&nbsp;&nbsp;
            <span v-if="$route.query.meetType==3" class="last_title" style="font-size: 14px;padding:0 20px"> 
                <el-tooltip class="item" effect="dark"  placement="top">
                  <div slot="content">1.如果选择报名免审，则报名用户不<br/>
                                 需要进行人工审核，就可以参加会议。<br/>
                                2.如果不选择报名免审，则报名用户<br/>
                               需要进行人工审核后，则可以参加会议</div>
                <i class="el-icon-question" style="color:#0C7FF2"></i>
               </el-tooltip> 
     用户报名是否免审</span>
     <span v-if="$route.query.meetType==3" v-loading="ispassLoading" style="padding-right: 20px;">
      <el-radio-group v-model="ispass" @change="ischangePass">
    <el-radio :label="1">是</el-radio>
    <el-radio :label="0">否</el-radio>
  </el-radio-group>
     </span>
    <span v-if="$route.query.meetType==3" @click="batchReview()" style="color:#0C7FF2;cursor: pointer;">批量审核</span>
 
          </span>
          <span>

            <span> <span style="padding-right: 10px;font-weight: bold;">会议通知短信</span>  会议名称：<span class="sl1" style="color: red;display:inline-block;width:150px;">{{
              ruleForm.title != null ? ruleForm.title : "空"
            }}</span>&nbsp;&nbsp;&nbsp;助教手机号：
              <span style="color: red">{{
                ruleForm.assistant != null ? ruleForm.assistant : "空"
              }}</span>
              &nbsp;&nbsp;&nbsp;</span>
            <el-button type="text" @click="emailDia = true">
              编辑信息</el-button>
          </span>
        </div>
        <div>
          <el-table v-loading="loading" :data="DataTable" style="width: 100%" max-height="620" @selection-change="handleSelectionChange">
            <el-table-column
            v-if="$route.query.meetType==3"
      type="selection"
      width="55">
    </el-table-column>
            <el-table-column prop="isPass" label="审核状态" width="120" align="left">
              <template slot-scope="scope">
                <div v-if="scope.row.isPass == 0">待审核</div>
                <div v-if="scope.row.isPass == 1">审核通过</div>
                <div v-if="scope.row.isPass == 2">已驳回</div>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="姓名" width="100" align="left">
              <template slot-scope="scope">
                <div class="flex">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sampleName" label="手机号" width="150" align="left">
              <template slot-scope="scope">
                {{(scope.row.mobile==''||scope.row.mobile.length<3)?scope.row.mobile: scope.row.mobile.substr(0,3) + "****" + scope.row.mobile.substr(7)}}
              </template>
            </el-table-column>
            <el-table-column v-if="$route.query.isCharges" prop="parentUsername" label="用户属性" width="100" align="left">
              <template slot-scope="scope">
                <div class="flex">
                  {{ scope.row.parentUsername != null ? '被邀请人' : '报名人' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="$route.query.isCharges" prop="ispayproof" label="是否有凭证" width="100" align="left">
              <template slot-scope="scope">
                <div class="flex" v-if="scope.row.chargeid != null && scope.row.chargeid > 0">
                  {{ scope.row.ispayproof == 1 ? '是' : '否' }}
                </div>
                <div v-else>
                  否
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="$route.query.isCharges" prop="parentUsername" label="付款信息" width="100" align="left">
              <template slot-scope="scope">
                <div v-if="scope.row.chargeid != null && scope.row.chargeid > 0">
                  <el-button type="text" @click="checkPaydata(scope.row)">查看</el-button>
                </div>
                <div v-else>
                  --
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="lyState" label="邮箱" width="200" align="left">
              <template slot-scope="scope">
                {{ scope.row.email }}
              </template>
            </el-table-column>
            <el-table-column prop="3" label="所属行业" width="150" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.industry }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="3" label="单位名称" width="300" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.company }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="3" label="单位类型" width="200" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.unitType }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="3" label="职位" width="150" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.dutyType }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="150" fixed="right">
              <template slot-scope="scope">
                <!-- 判断是否收费会议 -->
                <div v-if="$route.query.isCharges">
                  <!-- 判断是否为报名人 -->
                  <div v-if="scope.row.parentUsername != null && scope.row.parentUsername.length > 0">
                    --
                  </div>
                  <div v-else>
                    <div v-if="scope.row.isPass == 0">
                      <el-button type="text" @click="passOrrefuse(scope.row, 2,true)">驳回</el-button>
                      <el-button type="text" @click="passOrrefuse(scope.row, 1,true)">通过</el-button>
                    </div>
                    <div v-else>--</div>
                  </div>
                </div>
                <div v-else>
                  <div v-if="scope.row.isPass == 0">
                    <el-button type="text" @click="passOrrefuse(scope.row, 2)">驳回</el-button>
                    <el-button type="text" @click="passOrrefuse(scope.row, 1)">通过</el-button>
                  </div>
                  <div v-else>--</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="alignRight">
            <Pagination :total="total" :page="searchObj.page" :limit="searchObj.limit" @pagination="paginations" />
          </div>
        </div>
        <el-dialog title="审核通过短信提醒" :visible.sync="emailDia" width="520px" center :close-on-click-modal="false">
          <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="115px">
              <el-form-item label="主题名称" prop="title">
                <el-input v-model.trim="ruleForm.title"></el-input>
              </el-form-item>

              <el-form-item label="助教手机号" prop="assistant">
                <el-input v-model.trim="ruleForm.assistant"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveMsg('ruleForm')">确定</el-button>
          </span>
        </el-dialog>
        <!-- //查看付款信息 -->
        <el-dialog title="付款信息" :visible.sync="paymessageDia" width="480px" center :close-on-click-modal="false">
          <div>
            <div>
              <h4>付款信息</h4>
              <div class="list_body">
                付款单位: {{ Paydata.payunit }}
              </div>
              <div class="list_body">
                付款银行: {{ Paydata.bankname }}
              </div>
              <div class="list_body">
                银行账户: {{ Paydata.bankcardid }}
              </div>
              <div class="list_body">
                付款金额: {{ Paydata.money }}
              </div>
              <div class="list_body flex">
                付款凭证:
                <el-image v-if="Paydata.certificateurl" style="width: 50px;" :src="Paydata.certificateurl" :preview-src-list="srcList">
                </el-image>
                <span v-else>暂无凭证</span>
              </div>
            </div>
            <div>
              <h4>开票信息</h4>
              <div class="list_body">
                发票抬头: {{ Paydata.receipttitle }}
              </div>
              <div class="list_body">
                纳税人识别号: {{ Paydata.taxidnumber }}
              </div>
              <div class="list_body">
                发送邮箱: {{ Paydata.sendemail }}
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="paymessageDia = false">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <kf-dialog :content="'有任何直播问题，请联系您的专属客服'" ref="kfdialog"></kf-dialog>
    <review-dialog :tablechouseData="tablechouseData" :ruleForm="ruleForm" ref="reviewDialog" @reflash="reflash"></review-dialog>
  </div>
</template>
  
<script>
import left from "../components/left.vue";
import api from "@/api/index";
import VueQr from "vue-qr";
import { changeDateFormat7 } from "@/utils/commin";
import Pagination from "@/components/Pagination/index.vue";
import kfDialog from '@/components/kfdialog/index.vue'
import reviewDialog from '../components/reviewDialog.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    left,
    Pagination,
    VueQr,
    ElImageViewer,
    kfDialog,
    reviewDialog
  },
  data() {
    return {
      setpData: {
        step: 2,
        stepExamineOneStatus: 4,
        stepExaminetwoStatus: 1,
      },
      stepsObj: {
        list: ["填写会议信息", "进行会议设置", "会议预约审核"],
        nums: 1,
      },
      ispassLoading:false,
      ispass:'',
      emailDia: false,
      activeName: "first",
      ispassData: [
        { name: "待审核", value: "0" },
        { name: "审核通过", value: "1" },
        { name: "已驳回", value: "2" },
      ],
      searchObj: {
        imshowId: this.$store.getters.imShowId,
        mobile:'',
        industry: "", //行业类型
        dutyType: "", //职位类型
        unitType: "", //单位类型
        ispass: "",
        ispayproof:'',
        limit: 10,
        page: 1,
        mid: this.$route.query.mid,
      },
      ispayproofList:[{name:'是',value:1},{name:'否',value:0}],
      tablechouseData:[],
      show: false,
      srcList: [],
      paymessageDia: false,
      Paydata: {},
      total: 0,
      loading: false,
      DataTable: [],
      companyTypeList: [], //单位类型列表
      postTypeList: [], //职位类型列表
      industryTypeList: [], //行业类型列表
      rootBody: {}, //总计：
      PolyvData: {},
      MeetingContent: {},
      ruleForm: {
        assistant: "",
        title: "",
      },
      rules: {
        title: [{ required: true, message: "请输入会议名称", trigger: "blur" }],
        assistant: [
          { required: true, message: "请输入主持人手机号", trigger: "blur" },
        ],
      },
      contentLeft: null
    };
  },
  created() {
    if (this.$route.query.meetType == 2 || this.$route.query.meetType == 1 || this.$route.query.meetType == 4) {
      this.contentLeft = {
        title: '定制厂商会',
        content: '定制研讨会为预约审核机制，审核通过后，开启会议直播'
      }
    }
    if(this.$route.query.activeName){
      this.activeName=this.$route.query.activeName
    }
  },
  mounted() {
    this.getTypeList();
    this.selectUnitType();
    this.getPolyvInfo();
    this.getSmallMeetingPerson();
    this.getMeetingTopic();
    this.getMeetingTitleInfo();
  },
  methods: {
    reflash(val){
      this.SearchListBt();
    },
    //批量审核
    batchReview(){
      debugger
     if (this.tablechouseData.length==0) {
      this.$message({type:'error',message:'请选择审核人员'})
      return false
     }

     this.$refs.reviewDialog.reviewDia=true
    },
    handleSelectionChange(val){
      this.tablechouseData=val
    },
    ischangePass(){
    //  alert(this.ispass)
    this.ispassLoading=true
     let form={
      imshowId:this.$store.getters.imShowId,
      ispass:this.ispass,
      mid:this.$route.query.mid,
     }
     api.selfMeting.setSelfSmallMeetingIsPass(form).then(res=>{
        if (res.code==200) {
          this.ispassLoading=false
          this.$message({type:'success',message:'修改成功！'})
        }
     })
    },
    checkPaydata(item) {
      let form = {
        id: item.chargeid
      }
      api.selfMeting.getChargeInfoByid(form).then(res => {
        this.Paydata = res.data
        this.srcList = []
        this.srcList.push(this.Paydata.certificateurl)
        this.paymessageDia = true
      })
    },
    //获取会议标题
    getMeetingTitleInfo() {
      let form = {
        imshowId: this.$store.getters.imShowId,
        mid: this.$route.query.mid,
      };
      api.selfMeting.getMeetingTitleInfo(form).then((res) => {
        this.MeetingContent = res.data;
      });
    },
    goHref() {
      let form = {
        channelId: this.MeetingContent.polyvNum
      }
      api.selfMeting.getPolyUserLoginUrl(form).then(res => {
        if (res.code == 200) {
          window.open(res.data);
        }
      })
    },
    copyHref(item, index) {
      if (index == 1) {
        var data =
          "https://livem.instrument.com.cn/web-start/classroom?channelId=" +
          item;
        this.copy(data);
      } else {
        if (item.actor == "嘉宾") {
          var data =
            "https://livem.instrument.com.cn/web-start/classroom?channelId=" +
            item.account;
          this.copy(data);
        } else {
          var data = "https://livem.instrument.com.cn/teacher.html";
          this.copy(data);
        }
      }
    },
    // 复制功能
    copy(data) {
      // 存储传递过来的数据
      const OrderNumber = data;
      // 创建一个input 元素
      // createElement() 方法通过指定名称创建一个元素
      const newInput = document.createElement("input");
      // 讲存储的数据赋值给input的value值
      newInput.value = OrderNumber;
      // appendChild() 方法向节点添加最后一个子节点。
      document.body.appendChild(newInput);
      // 选中input元素中的文本
      // select() 方法用于选择该元素中的文本。
      newInput.select();
      // 执行浏览器复制命令
      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
      document.execCommand("Copy");
      // 清空输入框
      newInput.remove();
      // 下面是element的弹窗 不需要的自行删除就好
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
    saveMsg(formName) {
      this.ruleForm.mid = this.$route.query.mid;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.selfMeting.insertAssistant(this.ruleForm).then((res) => {
            this.$message({ type: "success", message: "保存成功！" });
            this.emailDia = false;
            this.getMeetingTopic();
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    passOrrefuse(item, val,istrue) {
      if (this.ruleForm.title == "" || this.ruleForm.title == null) {
        this.$message({
          type: "error",
          message: "请先选择编辑短信信息，才能审核！",
        });
        return false;
      }
      let form = {
        personId: item.personId,
        mid: istrue?this.$route.query.mid:item.mid,
        isPass: val,
        channel: 1,
      };
      //审核付费列表
      if (this.$route.query.isCharges) {
        api.selfMeting.updateChargeMeetingPerson(form).then((res) => {
          if (res.code == 200 && val == 1) {
            let form = {
              str: {
                mobile: item.mobile,
                mid: this.ruleForm.mid,
                title: this.ruleForm.title,
                linkManDX: this.ruleForm.assistant,
                msgType: "1",
                sendType: "1",
                buttonType: "3",
                channel: "1",
              },
            };
            api.selfMeting.sendChargesTestMsg(form).then((res) => {
              this.$message({ type: "success", message: "通过成功" });
              this.SearchListBt();
            });
          } else {
            //审核免费会议列表
            this.$message({ type: "success", message: "驳回成功" });
            this.SearchListBt();
          }
        });
      } else {
        api.selfMeting.updateMeetingPerson(form).then((res) => {
          if (res.code == 200 && val == 1) {
            let form = {
              str: {
                mobile: item.mobile,
                mid: this.ruleForm.mid,
                title: this.ruleForm.title,
                linkManDX: this.ruleForm.assistant,
                msgType: "1",
                sendType: "1",
                buttonType: "3",
                channel: "1",
              },
            };
            api.selfMeting.sendTestMsg(form).then((res) => {
              this.$message({ type: "success", message: "通过成功" });
              this.SearchListBt();
            });
          } else {
            this.$message({ type: "success", message: "驳回成功" });
            this.SearchListBt();
          }
        });
      }

    },
    //获取编辑内容
    async getMeetingTopic() {
      let form = {
        mid: this.$route.query.mid,
      };
      const { data } = await api.selfMeting.getMeetingTopic(form);
      this.ruleForm = data;
    },
    // 重置
    React() {
      this.searchObj = {
        imshowId: this.$store.getters.imShowId,
        industry: "", //行业类型
        dutyType: "", //职位类型
        unitType: "", //单位类型
        isPass: "",
        mobile:'',
        ispayproof:'',
        limit: 10,
        page: 1,
        mid: this.$route.query.mid,
      };
      this.times = [];
      this.getSmallMeetingPerson();
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.getSmallMeetingPerson();
    },
    // 查询
    SearchListBt() {
      // this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.getSmallMeetingPerson();
    },
    getSmallMeetingPerson() {
      if (this.$route.query.meetType) {
        if (this.$route.query.meetType == 2||this.$route.query.meetType == 3) {
          this.smallMeet();
        } else {
          if (this.$route.query.isCharges) {
            this.chargeMeet()
          } else {
            this.bigMeet();
          }
        }
      } else {
        this.smallMeet();
      }
    },
    smallMeet() {
      this.loading=true
      api.selfMeting.getSmallMeetingPerson(this.searchObj).then((res) => {
        this.DataTable = res.data.pagedata.records;
        this.total = res.data.pagedata.total;
        this.rootBody = res.data;
        console.log(this.rootBody);
        this.ispass=this.rootBody.ispass
        this.loading=false
      });
    },
    bigMeet() {
      this.loading=true
      api.selfMeting.getBigMeetingPreson(this.searchObj).then((res) => {
        this.DataTable = res.data.pagedata.records;
        this.total = res.data.pagedata.total;
        this.rootBody = res.data;
        this.loading=false
      });
    },
    chargeMeet() {
      this.loading=true
      api.selfMeting.getChargesMeetPerson(this.searchObj).then((res) => {
        this.DataTable = res.data.pagedata.records;
        this.total = res.data.pagedata.total;
        this.rootBody = res.data;
        this.loading=false
      });
    },
    getPolyvInfo() {
      let form = {
        imshowId: this.$store.getters.imShowId,
        mid: this.$route.query.mid,
      };
      api.selfMeting.getPolyvInfo(form).then((res) => {
        this.PolyvData = res.data;
      });
    },
    changeunit(val) {
      this.searchObj.dutyType = "";
      let obj = {};
      obj = this.companyTypeList.find((item) => {
        return item.id === val;
      });
      let form = {
        parentid: obj.id,
        typename: "ZWLX",
      };
      api.video.selectUnitType(form).then((res) => {
        this.postTypeList = res.data;
      });
    },
    //获取单位类型
    selectUnitType() {
      let form = {
        parentid: 0,
        typename: "DWLX",
      };
      api.video.selectUnitType(form).then((res) => {
        this.companyTypeList = res.data;
      });
    },
    //获取各种类型的列表
    getTypeList() {
      api.support.getIndustryClassifySelectByLevel().then((res) => {
        //获取行业分类
        if (res.code == 200) {
          this.industryTypeList = res.data.data;
        }
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
.list_body {
  margin: 18px 20px;
  margin-right: 0;
}

::v-deep .el-dialog__header {
  background: #f5f8fc;
  text-align: left;
  font-size: 16px;
  color: #202933;
  padding: 11px 16px;
}

::v-deep .el-dialog__body {
  padding: 25px 25px 10px !important;
}

::v-deep .el-dialog__title {
  font-size: 16px;
}

::v-deep .el-form-item__label {
  text-align: left !important;
}

:v-deep .el-form-item:last-child {
  margin-bottom: 0px;
}

.pr10 {
  padding-right: 10px;
}

.apply_center {
  @include flex(row, center, space-between);
  font-size: 12px;
  margin-bottom: 10px;
  color: #4f5862;
}

.mg16_mange {
  margin: 0 16px 16px;
}

.wid450 {
  width: 450px !important;
}

.formWidthdpl300 {
  width: 300px !important;
}

.wid200 {
  width: 200px !important;
}

.apply_right {
  margin-left: 16px;
  flex-grow: 1;
  width: 50%;
  background: #fff;

  .pd5_20 {
    padding: 5px 18px;
  }

  .right_form {
    padding: 32px;
    border-top: 1px solid #f0f3f7;
  }

  .mange_top {
    @include flex(row, center, space-between);
    padding: 16px;
    background: linear-gradient(180deg,
        #f8fbff 0%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #e5eaf0;

    .mange_left {
      h5 {
        font-size: 14px;
        font-weight: 600;
        color: #000000;
        line-height: 30px;
        margin-bottom: 7px;
      }

      .content {
        font-size: 14px;
        color: #7e8790;
        line-height: 30px;

        .pd25_30 {
          padding: 0 35px 0 25px;
        }
      }
    }
  }

  .mang_body_title {
    @include flex(row, center, space-between);
    padding-top: 40px;
    padding-bottom: 13px;

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #0c7ff2;

      .label {
        padding-left: 25px;
        font-size: 14px;
        color: #b9c0c7;
      }
    }

    .right {
      font-size: 14px;
      font-weight: 400;
      color: #0c7ff2;
      line-height: 16px;
      cursor: pointer;
    }
  }

  .mange_body_content {
    height: 680px;
    overflow-y: auto;
    padding: 0 16px;
    background: linear-gradient(180deg,
        #f8fbff 0%,
        rgba(255, 255, 255, 0) 100%);
    border: 1px solid #e5eaf0;

    .list {
      padding: 24px 0 8px 0;
      border-bottom: 1px solid #e5eaf0;

      .ml5 {
        margin-left: 10px;
      }

      .item_top {
        color: #000;
        margin-bottom: 8px;

        .top_title {
          font-size: 14px;
          font-weight: 400;
          color: #000000;
          display: inline-block;
          width: 115px;
          height: 30px;
          background: url("../../../assets/img/Rectangle\ 1235.png") no-repeat;
          font-size: 14px;
          background-size: 100%;
          line-height: 25px;
          padding-left: 10px;
        }

        .pd50_150 {
          padding: 0 150px 0 50px;
        }
      }
    }
  }
}

.apply_right2 {
  flex-grow: 1;
  width: 50%;
  background: #fff;
}

.right_btm {
  margin-top: 100px;
  padding-top: 24px;
  border-top: 1px solid #e5eaf0;
  text-align: center;
}
</style>